<template>
  <div class="risk-warning">
    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :model="searchForm" ref="searchFormRef" inline>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input
            v-model="searchForm.customerName"
            placeholder="请输入客户姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="预警类型" prop="type">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择预警类型"
            clearable
            style="width: 120px"
          >
            <el-option label="逾期风险" value="overdue" />
            <el-option label="欺诈风险" value="fraud" />
            <el-option label="信用风险" value="credit" />
          </el-select>
        </el-form-item>
        <el-form-item label="预警等级" prop="level">
          <el-select
            v-model="searchForm.level"
            placeholder="请选择预警等级"
            clearable
            style="width: 120px"
          >
            <el-option label="高" value="high" />
            <el-option label="中" value="medium" />
            <el-option label="低" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态" prop="status">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="未处理" value="pending" />
            <el-option label="处理中" value="processing" />
            <el-option label="已处理" value="processed" />
            <el-option label="已忽略" value="ignored" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleRule">预警规则</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 预警列表 -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        border
        stripe
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="customerName" label="客户姓名" width="120" />
        <el-table-column prop="type" label="预警类型" width="100">
          <template #default="scope">
            <el-tag :type="getWarningTypeTag(scope.row.type)">
              {{ getWarningTypeText(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="预警等级" width="100">
          <template #default="scope">
            <el-tag :type="getWarningLevelType(scope.row.level)">
              {{ getWarningLevelText(scope.row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="触发规则" min-width="200" />
        <el-table-column prop="description" label="预警描述" min-width="200" />
        <el-table-column prop="status" label="处理状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="handler" label="处理人" width="120" />
        <el-table-column prop="createTime" label="预警时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              link
              type="success"
              @click="handleProcess(scope.row)"
            >
              处理
            </el-button>
            <el-button
              v-if="scope.row.status === 'pending'"
              link
              type="info"
              @click="handleIgnore(scope.row)"
            >
              忽略
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 预警规则弹窗 -->
    <el-dialog
      v-model="ruleVisible"
      title="预警规则配置"
      width="800px"
      destroy-on-close
    >
      <el-table
        :data="ruleData"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="type" label="预警类型" width="100">
          <template #default="scope">
            <el-tag :type="getWarningTypeTag(scope.row.type)">
              {{ getWarningTypeText(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="规则名称" width="150" />
        <el-table-column prop="condition" label="触发条件" min-width="200" />
        <el-table-column prop="level" label="预警等级" width="100">
          <template #default="scope">
            <el-tag :type="getWarningLevelType(scope.row.level)">
              {{ getWarningLevelText(scope.row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleRuleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleEditRule(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              link
              type="danger"
              @click="handleDeleteRule(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 处理弹窗 -->
    <el-dialog
      v-model="processVisible"
      title="预警处理"
      width="600px"
      destroy-on-close
    >
      <el-form
        ref="processFormRef"
        :model="processForm"
        :rules="processRules"
        label-width="100px"
      >
        <el-form-item label="处理方式" prop="method">
          <el-select
            v-model="processForm.method"
            placeholder="请选择处理方式"
            style="width: 100%"
          >
            <el-option label="电话沟通" value="phone" />
            <el-option label="上门拜访" value="visit" />
            <el-option label="发送通知" value="notice" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理结果" prop="result">
          <el-input
            v-model="processForm.result"
            type="textarea"
            :rows="3"
            placeholder="请输入处理结果"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processVisible = false">取消</el-button>
          <el-button type="primary" @click="handleProcessSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      title="预警详情"
      width="800px"
      destroy-on-close
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="客户姓名">{{ detail.customerName }}</el-descriptions-item>
        <el-descriptions-item label="预警类型">
          <el-tag :type="getWarningTypeTag(detail.type)">
            {{ getWarningTypeText(detail.type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="预警等级">
          <el-tag :type="getWarningLevelType(detail.level)">
            {{ getWarningLevelText(detail.level) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="处理状态">
          <el-tag :type="getStatusType(detail.status)">
            {{ getStatusText(detail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="触发规则" :span="2">{{ detail.rule }}</el-descriptions-item>
        <el-descriptions-item label="预警描述" :span="2">{{ detail.description }}</el-descriptions-item>
        <el-descriptions-item label="预警时间">{{ detail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="处理人">{{ detail.handler }}</el-descriptions-item>
        <el-descriptions-item label="处理方式">{{ getProcessMethodText(detail.processMethod) }}</el-descriptions-item>
        <el-descriptions-item label="处理时间">{{ detail.processTime }}</el-descriptions-item>
        <el-descriptions-item label="处理结果" :span="2">{{ detail.processResult }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  customerName: '',
  type: '',
  level: '',
  status: ''
})

// 表格数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const tableData = ref([
  {
    customerName: '张三',
    type: 'overdue',
    level: 'high',
    rule: '逾期天数超过30天',
    description: '客户张三的贷款已逾期35天，触发高风险预警',
    status: 'pending',
    handler: '',
    createTime: '2024-03-01 10:00:00'
  }
])

// 规则数据
const ruleVisible = ref(false)
const ruleData = ref([
  {
    type: 'overdue',
    name: '逾期预警',
    condition: '逾期天数 > 30',
    level: 'high',
    status: 1
  },
  {
    type: 'fraud',
    name: '欺诈预警',
    condition: '同一身份证多次申请',
    level: 'high',
    status: 1
  },
  {
    type: 'credit',
    name: '信用预警',
    condition: '信用评分 < 60',
    level: 'medium',
    status: 1
  }
])

// 处理数据
const processVisible = ref(false)
const processFormRef = ref(null)
const currentWarning = ref({})
const processForm = reactive({
  method: '',
  result: ''
})

const processRules = {
  method: [
    { required: true, message: '请选择处理方式', trigger: 'change' }
  ],
  result: [
    { required: true, message: '请输入处理结果', trigger: 'blur' }
  ]
}

// 详情数据
const detailVisible = ref(false)
const detail = ref({})

// 查询
const handleSearch = () => {
  loading.value = true
  // TODO: 实现查询逻辑
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 重置
const handleReset = () => {
  searchForm.customerName = ''
  searchForm.type = ''
  searchForm.level = ''
  searchForm.status = ''
  handleSearch()
}

// 预警规则
const handleRule = () => {
  ruleVisible.value = true
}

// 规则状态变更
const handleRuleStatusChange = (row) => {
  // TODO: 实现规则状态变更逻辑
  ElMessage.success(`规则"${row.name}"${row.status === 1 ? '启用' : '停用'}成功`)
}

// 编辑规则
const handleEditRule = (row) => {
  // TODO: 实现编辑规则逻辑
}

// 删除规则
const handleDeleteRule = (row) => {
  ElMessageBox.confirm(
    `确认删除规则"${row.name}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 实现删除规则逻辑
    ElMessage.success('删除成功')
  })
}

// 处理
const handleProcess = (row) => {
  currentWarning.value = row
  processForm.method = ''
  processForm.result = ''
  processVisible.value = true
}

// 提交处理
const handleProcessSubmit = async () => {
  if (!processFormRef.value) return
  
  await processFormRef.value.validate((valid, fields) => {
    if (valid) {
      // TODO: 实现处理提交逻辑
      ElMessage.success('处理提交成功')
      processVisible.value = false
      handleSearch()
    }
  })
}

// 忽略
const handleIgnore = (row) => {
  ElMessageBox.confirm(
    '确认忽略该预警吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 实现忽略预警逻辑
    ElMessage.success('操作成功')
    handleSearch()
  })
}

// 详情
const handleDetail = (row) => {
  detail.value = row
  detailVisible.value = true
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}

// 获取预警类型标签类型
const getWarningTypeTag = (type) => {
  const map = {
    overdue: 'danger',
    fraud: 'warning',
    credit: 'info'
  }
  return map[type]
}

// 获取预警类型文本
const getWarningTypeText = (type) => {
  const map = {
    overdue: '逾期风险',
    fraud: '欺诈风险',
    credit: '信用风险'
  }
  return map[type]
}

// 获取预警等级标签类型
const getWarningLevelType = (level) => {
  const map = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return map[level]
}

// 获取预警等级文本
const getWarningLevelText = (level) => {
  const map = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return map[level]
}

// 获取状态标签类型
const getStatusType = (status) => {
  const map = {
    pending: 'info',
    processing: 'warning',
    processed: 'success',
    ignored: ''
  }
  return map[status]
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    pending: '未处理',
    processing: '处理中',
    processed: '已处理',
    ignored: '已忽略'
  }
  return map[status]
}

// 获取处理方式文本
const getProcessMethodText = (method) => {
  const map = {
    phone: '电话沟通',
    visit: '上门拜访',
    notice: '发送通知',
    other: '其他'
  }
  return map[method]
}
</script>

<style scoped>
.risk-warning {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style> 